<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="box" >
        好好学习
    </div>

    <input type="text" name="username" value="我是文本框" >
     <br>

    <img id="img"  src="img/1.jpg" alt="图片加载失败" title="这是一张美图" width="150px" height="100px">
    <input type="button" value="点击我" onclick="replace()">
 <br>
    <input id="check" type="checkbox">选择



    <hr>
    <img id="pic" src="img/2.jpg"  width="100px" height="70px"> <br>
    <input type="button" value="点击隐藏" onclick="hide()">
    <input type="button" value="点击显示" onclick="show()">
    
    <hr>
    <input type="button" value="方法操作属性" onclick="changeAttr()">
    
</body>
</html>
<script>
    //修改div的文字

    //1.获取元素对象
   var box =  document.querySelector("#box");


    //2.修改元素内容
   box.innerHTML = "我是修改后的内容";
   //box.innerText = "我是修改后的内容";



   //获取文本框并设置value属性
   document.querySelector("input").value = "我是修改过的文本框";
   


   function replace(){
   //对图片的是属性进行操作
   var img = document.querySelector("#img");
   //操作属性     对象.属性==>获取属性值       对象.属性=值  ==>设置属性值
   // 样式相关的不要直接写 建议直接写的是单个属性
   img.src="img/2.jpg";
//    img.title  img.alt

   //css相关属性的设置
   box.style.color="red";
   box.style.fontSize="50px";
   box.style.backgroundColor="yellow";
   box.style.width="500px";
   box.style.height="300px";

   //控制复选框的属性  checked 属性是选择框的特有属性 表示选中和未选中     true选中   false未选中
   document.querySelector("#check").checked = true;


   }


   //点击图片的操作
   function hide(){
    document.querySelector("#pic").style.display="none";
       
   }

   function show(){
    document.querySelector("#pic").style.display="inline";
   }

   //通过方法来对属性进行设置或者获取
   function changeAttr(){

    //方法获取属性
    var  imgs = document.querySelector("#pic");
    //对象.getAttribute("属性名") 获取对象的指定属性名 
    alert(imgs.getAttribute("src"));
    alert(imgs.getAttribute("width"));

    //设置属性名  对象.setAttibute("属性名","属性值");
    imgs.setAttribute("src","img/1.jpg");

   }

   /* 
   操作js元素对象对象的一般步骤：
   获取元素对象
   设置元素对象的属性和值


   改变元素内容：
   innerHTML 获取或设置元素的包含了标签的内容
   innerText 获取或设置元素包含的文字内容


   属性操作：
   对象.属性    获取对象的某个属性
   对象.属性=值  设置对象的某个属性
   
   特殊：css的设置
   对象.style.css样式属性=值；  设置css
   对象.style.css样式  获取css样式的值

   //方法操作属性
   对象.getAttribute("属性名") 获取对象的指定属性名 
   对象.setAttribute("属性名","属性值"); 设置对象的属性名
   */


   
   
   
   
   



</script>